/*
 * @Author: xinyang3
 * @Date: 2021-07-20 15:11
 * @Descripttion: provide/inject
 * @LastEditors: xinyang3
 * @LastEditTime: 2021-07-20 15:20
 */
var TodoList = {
  name: 'todoList',
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide() {
    return {
      user: 'john smith',
      todoLength: this.todos.length
    }
  },
  template: `
  <todo-list-statistics></todo-list-statistics>
  `
};

var app = Vue.createApp(TodoList);

app.component('todo-list-statistics', {
  inject: ['user', 'todoLength'],
  created() {
    console.log(`Injected property: user=${this.user}, todoLength=${this.todoLength}`) // > 注入 property: John Doe
  },
  template: `<span>{{user}}</span>`
});

app.mount('#app');